<template>
    <div>
        <p class="reg-title">注册账号</p>
        <van-form @submit="onSubmit" class="reg-form">
            <van-field
                v-model="tel"
                name="手机号"
                placeholder="请输入手机号"
                :rules="rules.tel"
                clearable
            />
            <van-field
                v-model="pwd"
                type="password"
                name="密码"
                placeholder="请填写密码"
                :rules="rules.pwd"
                clearable
            />
            <van-field
                v-model="pwdAgain"
                type="password"
                name="密码"
                placeholder="请再次确认密码"
                @blur="verify"
                :rules="rules.pwdAgain"
                clearable
            />
            <van-notice-bar font-size="10px" color="#C8C9CC" background="#fff" left-icon="info-o" :scrollable="false">
                长度为6~16位，不能是纯数字、字母或字符
            </van-notice-bar>

            <!-- 协议 -->
            <div class="text">
                <van-row style="height:35px;line-height:35px; font-size:16px; margin:20px 0;">
                    <van-col span="1.4" style="margin-top:2px;">
                        <van-checkbox v-model="checked" checked-color="#033E98" icon-size="14px"></van-checkbox>
                    </van-col>
                    <van-col span="6.4">
                        <span class="agree">注册即同意</span>
                    </van-col>
                    <van-col span="6.4" style="margin-top:8px;">
                        <van-cell @click="showService"> <a href="#">《服务协议》</a></van-cell>
                        <van-popup v-model="show1" closeable position="bottom" :style="{ height: '80%' }">
                            <div>
                                <p>用户协议</p>
                                <span>
                                    《用户服务协议和隐私政策》（以下简称“协议”）及其条款，
                                    系确立您与成都亿程亿安科技有限公司之间就下载、安装及使用该软件（以下简称“本软件”或“本应用”）
                                    所订立的、描述您与本应用之间权利义务的协议。在注册前务必认真阅读本协议的内容、充分理解各条款内容，如有异议，
                                    您可选择不进入本应用。一旦您确认本用户注册协议后，本协议即在您和本应用之间产生法律效力，意味着您完全同意并接受协议的全部条款。
                                    请您审慎阅读并选择接受或不接受协议（未成年人应在法定监护人陪同下阅读）。
                                </span>
                            </div>
                        </van-popup>
                    </van-col>
                    <van-col span="1.4" style="margin-top:2px;">和</van-col>
                    <van-col span="8.4" style="margin-top:8px;">
                        <van-cell @click="showSecret"> <a href="#">《隐私政策》</a></van-cell>
                        <van-popup v-model="show2" closeable position="bottom" :style="{ height: '80%' }">
                            <div>
                                <p>隐私政策</p>
                                <span>
                                    本应用尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，
                                    本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。
                                    除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。
                                    本应用会不时更新本隐私权政策。 您在同意本应用服务使用协议之时，即视为您已经同意本隐私权政策全部内容。
                                    本隐私权政策属于本应用服务使用协议不可分割的一部分。
                                </span>
                            </div>
                        </van-popup>
                    </van-col>
                </van-row>
            </div>
            <div>
                <van-button class="sure" round block native-type="submit" :disabled="!checked" @click="login">确定</van-button>
            </div>
            <p class="login">已有账号？<a href="http://localhost:8080/login">直接登录</a></p>
        </van-form>
    </div>
    
</template>

<script>
    export default {
        data() {
            
            return {
                tel:'',
                pwd:'',
                pwdAgain:'',
                msg:'',
                rules:{
                    tel:[{
                            required: true, 
                            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, 
                            trigger: 'onBlur',
                            message: '请输入正确的手机号码'
                        }
                    ],
                    pwd:[{
                            required: true,
                            pattern :/^[a-zA-Z0-9_-]{6,16}$/, 
                            trigger: 'onBlur',
                            message: '密码格式不正确'
                        },
                        
                    ],
                    pwdAgain:[{
                        required: true,
                        trigger: 'onBlur',
                        message: '两次输入密码不一致'
                    },
                    
                ]
                },
                show1: false,
                show2: false,
                disabled:true,
                checked:false,

            }
        },
        methods: {
            // 判断两次密码输入是否一致
            verify(){
                if(this.pwd !== this.pwdAgain){
                    this.$dialog.comfirm = '两次密码不一致'
                    return
                }
            },
            // 提交
            onSubmit(){
                console.log(11);
                this.verify()
            },
            showService() {
                this.show1 = true;
            },
            showSecret() {
                this.show2 = true;
            },
            login(){
                this.$router.push({path:'/login'})
            }
        },
    }
</script>

<style lang="less" scoped>
    .reg-title{
        font-weight:500;
        margin-left:20px;
    }
    .reg-form{
        font-size:16px;
        padding:0 25px;
    }
    .text{
        font-size:16px;
        a{
            color:#033E98;
        }
    }
    .van-field{
        height: 60px;
        line-height:60px;
    }
    .agree{
        height:40px;
        line-height: 40px;
    }
    .sure{
        color:#fff;
        background-color: #033E98;
        
    }
    .login{
        font-size:16px;
        text-align: center;
        a{
            color:#033E98;
        }
    }
    .van-cell{
        margin:0;
        padding:0;
        a{
            font-size:16px;
        }
        .van-cell__value{
            padding-right:-10px;
            margin:0px !important;
            padding:0px !important;
        }
    }
    .van-popup{
        div{
            padding:20px;
            p{
                text-align: center;
                font-weight: bold;
                height:30px;
                line-height: 30px;
            }
            span{
                text-indent: 50px;
            }
        }
    }
    .van-checkbox{
        width:20px;
        height:20px;
        margin-top:8px;
    }
    .van-notice-bar{
        margin:0px;
        padding:0px;
        height:30px;
        line-height:30px;
    }

</style>